<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
  <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
</head>
<style>
  #map {
    width: 100%;
    height: 98vh;
  }

  .ol-zoomslider {
    top: 7.5em;
  }
</style>

<body>
  <div id="map" class="map">
  </div>
  <script>
    const gaodeMapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
      })
    });
    const map = new ol.Map({
      target: 'map',
      layers: [gaodeMapLayer],
      view: new ol.View({
        projection: "EPSG:4326",

        center: [116.404, 39.915],
        zoom: 9
      })
    });
// 创建geojson数据
var data={
  type:"FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [116.404, 39.915]
      },
}]
}
//将数据添加到矢量数据源
var source = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(data)
}); 
//创建矢量图层并添加到地图
var vectorLayer = new ol.layer.Vector({
  source: source
});
const style = new ol.style.Style({
  image: new ol.style.Circle({
    radius: 10,
    fill: new ol.style.Fill({
      color: 'red'
    }),
    stroke: new ol.style.Stroke({
      color: 'black',
      width: 1
    })
  })
});
vectorLayer.setStyle(style);
map.addLayer(vectorLayer);

    // 地图控件------------------------------------------------
    //视图跳转控件
    const zoomToExtent = new ol.control.ZoomToExtent({ extent: [110, 30, 160, 30] });
    map.addControl(zoomToExtent);
    //缩放控件
    const zoomSlider = new ol.control.ZoomSlider();
    map.addControl(zoomSlider);
    //全屏控件
    const fullScreenControl = new ol.control.FullScreen();
    map.addControl(fullScreenControl);
    //比例尺控件
    const scaleLineControl = new ol.control.ScaleLine();
    map.addControl(scaleLineControl);
  </script>
</body>

</html>